<template>
  <div class="app-footer">
    <div class="footer-info">
      <div>
        选照片15~40张
        <span>({{photoNum}}/{{needPhotoNum}})</span>
      </div>
      <div>
        选视频10条以下
        <span>(12/30)</span>
      </div>
    </div>
    <div>
      <nut-button
        :class="[useSubmit? 'btn-selected' : '']"
        class="add-btn"
        block
        shape="circle"
        @click="handleSelectOver"
      >选好了</nut-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppFooter',
  props: {
    needPhotoNum: Number,
    photoNum: Number,
    needVideoNum: Number,
    videoNum: Number,
    // selectOver: Boolean,
  },
  data() {
    return {
      title: this.$route.meta.title,
      useSubmit: false,
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    changeHeaderId(d) {
      this.$emit('handleChangeHeader', d);
    },
    handleSelectOver() {},
    isButDisabled() {
      console.log(this.needPhotoNum, this.photoNum, this.needVideoNum, this.videoNum)
      if (
        this.needPhotoNum === this.photoNum &&
        this.needVideoNum === this.videoNum
      ) {
        this.useSubmit = true;
      } else {
        this.useSubmit = false;
      }
    },
  },
  watch: {
    photoNum() {
      this.isButDisabled();
    },
    videoNum() {
      this.isButDisabled();
    },
  },
};
</script>

<style scoped lang="scss">
.app-footer {
  width: 100%;
  height: 10vh;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .footer-info {
    width: 50vw;
    & > div {
      color: #1e1e1e;
      font-size: 14px;
      height: 3vh;
      line-height: 3vh;
      padding-left: 5vw;
      span {
        margin-left: 10px;
        color: #bebdbd;
        font-size: 13px;
      }
    }
  }
  .add-btn {
    width: 40vw;
    background: #dddddd;
    color: #ffffff;
    margin-right: 5vw;
  }
  .btn-selected {
    background: #ff7e00;
    color: #ffffff;
  }
}
</style>
